<template>
  <el-dialog 
    :title="dialogStatus" 
    :visible.sync="dialogFormVisible" 
    width="60%">
    <el-form 
      label-position="right" 
      label-width="100px" 
      style="width: 100%;">

      <el-form-item :label="$t('consumer.name')" >
        <span>{{ Form.name }}</span>
      </el-form-item>

      <el-form-item :label="$t('consumer.phone')" >
        <span>{{ Form.phone }}</span>
      </el-form-item>

      <el-form-item :label="$t('consumer.createtime')" >
        <span>{{ Form.createtime }}</span>
      </el-form-item>

      <el-form-item :label="$t('consumer.idcardBack')">
        <el-row>
          <el-col :span="12">
            <img 
              :src="Form.idcardBack1" 
              :preview-text="$t('consumer.idcardBack1')" 
              preview="1" 
              style="width: 200px;height: 150px">
          </el-col>
          <el-col :span="12">
            <img 
              :src="Form.idcardBack1" 
              :preview-text="$t('consumer.idcardBack2')" 
              preview="1" 
              style="width: 200px;height: 150px">
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="所属理财师">
        <el-table
          :data="Form.father"
          border
          style="width: 100%">
          <el-table-column
            prop="nickname"
            label="姓名"
            width="80" 
            align="center"/>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="160" 
            align="center"/>
          <el-table-column 
            align="center" 
            label="理财师等级">
            <template slot-scope="scope">
              <span>{{ scope.row.userType | userType }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script>

import { fetch} from '@/api/consumer'
import ProgressBar from '@/components/Progress'

const userType = {
  1:'金牌理财师',
  2:'银牌理财师',
};
export default {
  name: 'TempForm',
  components: {
    ProgressBar
  },
  filters:{
    userType:function (status) {
      return userType[status];
    }
  },
  data() {
    return {
      dialogStatus: '',
      addLoading: false,
      dialogFormVisible: false,
      Form: {
        name:'大河',
        phone:'13546351623',
        createtime:'1900-12-26 12:11:00',
        idcardBack1:'http://img.tqcaifu.com/01521525089.png',
        idcardBack2:'http://img.tqcaifu.com/01521525089.png',
        father:[
          {
            nickname:'daB',
            mobile:'1356251723',
            id:'2',
            userType:1,
          }
        ]
      }
    }
  },
  methods: {
    formShow: function($row, $option, $type = 0) {
      this.dialogFormVisible = true
      // 编辑
      this.dialogStatus = '详情'
      fetch($row).then(res=>{
          if(res.data.code==1){
            this.Form = res.data.data;
          }else{
            this.$message({
              showClose: true,
              message: '获取数据失败',
              type: 'error'
            })
          }
        }
      ).catch(()=>{
        this.$message({
          showClose: true,
          message: '网络请求失败',
          type: 'error'
        })
      });

    },
  }
}
</script>

<style scoped>
  .scheduleInput{
    margin-bottom: 10px;
    margin-right: 30px;
  }
</style>

<style>
  .pswp--supports-fs{
    z-index: 9000;
  }
</style>
